<template>
  <el-dialog
    top="5vh"
    title="添加、编辑"
    :visible.sync="dialogValue"
    width="1089px"
    append-to-body
  >
    <el-form ref="ruleForm" inline :model="ruleForm" :rules="rules" style="height: 700px;overflow-y: auto">
      <TitleBox size="mini" title="基本信息" style="margin-bottom: 18px" />
      <el-row>
        <el-col :span="12">
          <el-form-item label="事项名称：" prop="productName">
            <el-input v-model="ruleForm.productName" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="受理机构：" prop="mechanism">
            <el-input v-model="ruleForm.mechanism" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.id">
          <el-form-item label="事项编码：" prop="productCode">
            <el-input v-model="ruleForm.productCode" clearable disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务对象：" pro="serviceObject">
            <el-input v-model="ruleForm.serviceObject" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="办件类型：" prop="handlingType">
            <el-input v-model="ruleForm.handlingType" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="特别程序：" prop="special">
            <el-input v-model="ruleForm.special" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <TitleBox size="mini" title="办事地点/时间" style="margin-bottom: 18px" />
      <el-row>
        <el-col :span="24">
          <el-form-item label="地点：" prop="workLocation">
            <el-input v-model="ruleForm.workLocation" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="时间：" prop="workSt">
          <el-date-picker v-model="ruleForm.workSt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" />
        </el-form-item>
        <span style="line-height: 33px">至 </span>
        <el-form-item prop="workEt">
          <el-date-picker v-model="ruleForm.workEt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="电话：" prop="workPhone">
            <el-input v-model="ruleForm.workPhone" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <TitleBox size="mini" title="材料清单" style="margin-bottom: 18px" />
      <div class="list">
        <div v-for="(item,index) in ruleForm.productMaterialList" :key="index">
          <el-form-item label="材料名称：">
            <el-input v-model="item.materialName" clearable />
          </el-form-item>
          <el-form-item label="附件：">
            <DragUpload :url="item.file" @on-success="url => item.file = url" />
          </el-form-item>
          <el-button type="danger" icon="el-icon-delete" @click="ruleForm.productMaterialList.splice(index,1)" />
        </div>

        <div style="width: 100%;text-align: center">
          <el-button
            style="width: 300px"
            type="primary"
            icon="el-icon-plus"
            @click="ruleForm.productMaterialList.push({
              'materialName': '',
              'file': ''
            })"
          >添加</el-button>
        </div>
      </div>
      <TitleBox size="mini" title="是否需要中介介入" style="margin-bottom: 18px" />
      <el-form-item>
        <el-radio-group v-model="ruleForm.isIntervene">
          <el-radio-button label="1">是</el-radio-button>
          <el-radio-button label="2">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <TitleBox size="mini" title="中介机构/业主需做事项" style="margin-bottom: 18px" />
      <el-form-item>
        <el-input v-model="ruleForm.interveneName" clearable style="width: 800px" type="textarea" :rows="5" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" style="text-align: left">
      <el-button @click="dialogValue = false">取 消</el-button>
      <el-button type="primary" @click="onSave">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { http_product } from '@/api'

export default {
  name: 'Add',
  data() {
    return {
      dialogValue: false,
      ruleForm: {
        id: undefined,
        'isBidding': '',
        'productName': '',
        productCode: '',
        'mechanism': '',
        'serviceObject': '',
        'handlingType': '',
        'special': '',
        'workLocation': '',
        'workSt': '',
        'workEt': '',
        'workPhone': '',
        'isIntervene': '2',
        'otherMatters': '',
        'productMaterialList': [
          {
            'materialName': '',
            'file': ''
          }
        ],
        productBiddingList: [],
        rules: {
          productName: [{ required: true, message: '不能为空' }],
          mechanism: [{ required: true, message: '不能为空' }],
          serviceObject: [{ required: true, message: '不能为空' }],
          handlingType: [{ required: true, message: '不能为空' }],
          special: [{ required: true, message: '不能为空' }]
      }
      }
    }
  },
  methods: {
    open(item) {
      if (item) {
        http_product.read(item.productCode).then(res => {
          console.log(res)
          for (const ruleFormKey in this.ruleForm) {
            if (ruleFormKey === 'productMaterialList' || ruleFormKey === 'productBiddingList') {
              this.ruleForm[ruleFormKey] = res.data[ruleFormKey] || []
            } else {
              this.ruleForm[ruleFormKey] = res.data[ruleFormKey]
            }
          }
        })
      } else {
        this.ruleForm = {
          id: undefined,
          'isBidding': '',
          'productName': '',
          productCode: '',
          'mechanism': '',
          'serviceObject': '',
          'handlingType': '',
          'special': '',
          'workLocation': '',
          'workSt': '',
          'workEt': '',
          'workPhone': '',
          'isIntervene': '2',
          'otherMatters': '',
          'productMaterialList': [
            {
              'materialName': '',
              'file': ''
            }
          ],
            productBiddingList: []
        }
      }
      this.dialogValue = true
    },
    onSave() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          http_product[this.ruleForm.id ? 'update' : 'create']({
            ...this.ruleForm,
            isBidding: '0'
          }).then(res => {
            this.$message.success(res.msg)
            this.dialogValue = false
            this.$emit('get-page')
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
